<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>报告处理</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="width: 70%" size="small">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职业兴趣" prop="careerInterest" :rules="{required: true, message: '请选择职业兴趣', trigger: 'blur' }">
              <el-input v-model="form.careerInterest" placeholder="请选择职业兴趣"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技能信心" prop="skillConfidence" :rules="{required: true, message: '请输入技能信心', trigger: 'blur' }">
              <el-input v-model="form.skillConfidence" placeholder="请输入技能信心"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成就感" prop="raccomplishment">
              <el-input v-model="form.raccomplishment" placeholder="请输入成就感"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生活方式" prop="rlifestyle">
              <el-input v-model="form.rlifestyle" placeholder="请输入生活方式"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="挑战" prop="rchallenge">
              <el-input v-model="form.rchallenge" placeholder="请输入挑战"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="声望" prop="rprestige">
              <el-input v-model="form.rprestige" placeholder="请输入声望"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同事" prop="rcooperation">
              <el-input v-model="form.rcooperation" placeholder="请输入同事"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安全感" prop="rsecurity">
              <el-input v-model="form.rsecurity" placeholder="请输入安全感"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创造性" prop="rcreativity">
              <el-input v-model="form.rcreativity" placeholder="请输入创造性"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="监督" prop="rsupervise">
              <el-input v-model="form.rsupervise" placeholder="请输入监督"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收入" prop="rincome">
              <el-input v-model="form.rincome" placeholder="请输入收入"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="多样化" prop="rdiversification">
              <el-input v-model="form.rdiversification" placeholder="请输入多样化"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="独立性" prop="rindependence">
              <el-input v-model="form.rindependence" placeholder="请输入独立性"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作场所" prop="rworkplace">
              <el-input v-model="form.rworkplace" placeholder="请输入工作场所"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高考科目推荐" prop="actionSuggestion">
              <div class="table_wrapper">
                <div class="th">
                  <div class="item item_th" style="width: 50%">组合名称</div>
                  <div class="item item_th" style="width: 20%">操作</div>
                  <div class="item item_th" style="width: 30%;white-space: nowrap;text-align: right">
                    <el-button type="text" @click="addMore(1)">批量添加</el-button>
                  </div>
                </div>
                <div class="td" v-for="(item, index) in expandList1">
                  <div class="item_td" style="width: 60%">
                    <el-input size="mini" v-model="item.linkValue"></el-input>
                  </div>
                  <div class="item_td" style="width: 35%;padding-left: 10px">
                    <el-button type="text" @click="addOne(1)">添加</el-button>
                    <el-button type="text" style="color: red" @click="delOne(1, index)">删除</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="兴趣与技能信心职业推荐" prop="actionSuggestion">
              <div class="table_wrapper">
                <div class="th">
                  <div class="item item_th" style="width: 50%">组合名称</div>
                  <div class="item item_th" style="width: 20%">操作</div>
                  <div class="item item_th" style="width: 30%;white-space: nowrap;text-align: right">
                    <el-button type="text" @click="addMore(2)">批量添加</el-button>
                  </div>
                </div>
                <div class="td" v-for="(item, index) in expandList2">
                  <div class="item_td" style="width: 60%">
                    <el-input size="mini" v-model="item.linkValue"></el-input>
                  </div>
                  <div class="item_td" style="width: 35%;padding-left: 10px">
                    <el-button type="text" @click="addOne(2)">添加</el-button>
                    <el-button type="text" style="color: red" @click="delOne(2,index)">删除</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="兴趣职业推荐" prop="actionSuggestion">
              <div class="table_wrapper">
                <div class="th">
                  <div class="item item_th" style="width: 50%">组合名称</div>
                  <div class="item item_th" style="width: 20%">操作</div>
                  <div class="item item_th" style="width: 30%;white-space: nowrap;text-align: right">
                    <el-button type="text" @click="addMore(3)">批量添加</el-button>
                  </div>
                </div>
                <div class="td" v-for="(item, index) in expandList3">
                  <div class="item_td" style="width: 60%">
                    <el-input size="mini" v-model="item.linkValue"></el-input>
                  </div>
                  <div class="item_td" style="width: 35%;padding-left: 10px">
                    <el-button type="text" @click="addOne(3)">添加</el-button>
                    <el-button type="text" style="color: red" @click="delOne(3, index)">删除</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技能信心职业推荐" prop="actionSuggestion">
              <div class="table_wrapper">
                <div class="th">
                  <div class="item item_th" style="width: 50%">组合名称</div>
                  <div class="item item_th" style="width: 20%">操作</div>
                  <div class="item item_th" style="width: 30%;white-space: nowrap;text-align: right">
                    <el-button type="text" @click="addMore(4)">批量添加</el-button>
                  </div>
                </div>
                <div class="td" v-for="(item, index) in expandList4">
                  <div class="item_td" style="width: 60%">
                    <el-input size="mini" v-model="item.linkValue"></el-input>
                  </div>
                  <div class="item_td" style="width: 35%;padding-left: 10px">
                    <el-button type="text"  @click="addOne(4)">添加</el-button>
                    <el-button type="text" style="color: red" @click="delOne(4, index)">删除</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <div style="clear: both">
          <el-form-item label="优势潜能分析" prop="advantagePotentialAnalysis">
            <Editor v-model="form.advantagePotentialAnalysis" :minHeight="150"></Editor>
          </el-form-item>
          <el-form-item label="学科能力分析" prop="subjectAbilityAnalysis">
            <Editor v-model="form.subjectAbilityAnalysis" :minHeight="150"></Editor>
          </el-form-item>
          <el-form-item label="行动建议" prop="actionSuggestion">
            <Editor v-model="form.actionSuggestion" :minHeight="150"></Editor>
          </el-form-item>
            </div>
        </el-row>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-card>
    <el-dialog
      title="批量添加"
      center
      :visible.sync="dialogVisible"
      width="500px">
      <el-input type="textarea" :autosize="{ minRows: 5}"
                v-model="moreInput"
                placeholder="多行输入，回车换行"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd" size="mini">取 消</el-button>
        <el-button type="primary" @click="sure" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getCompassReport,updateCompassReport,addCompassReport} from "@/api/system/CompassReport";
import Editor from "@/components/Editor";
import {arrayGroupBy} from "../../../utils";

export default {
  components: {
    Editor
  },
  data() {
    return {
      form: {},
      rules: {},
      expandList1: [
        {linkKey:'',linkType: '高考科目推荐', linkValue: ''}
      ],
      expandList2: [{linkKey:'',linkType: '兴趣与技能信心职业推荐', linkValue: ''}],
      expandList3: [{linkKey:'',linkType: '兴趣职业推荐', linkValue: ''}],
      expandList4: [{linkKey:'',linkType: '技能信心职业推荐', linkValue: ''}],
      linkType: ['高考科目推荐','兴趣与技能信心职业推荐','兴趣职业推荐','技能信心职业推荐'],
      dialogVisible: false,
      moreInput: '',
      currentType: ''
    }
  },

  mounted() {
    this.getDetails()
  },

  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.expandList = []
          this.form.expandList = [...this.expandList1, ...this.expandList2, ...this.expandList3, ...this.expandList4]
          const postData = {
            ...this.form,
            advantagePotentialAnalysis: this.filterContent(this.form.advantagePotentialAnalysis),
            subjectAbilityAnalysis: this.filterContent(this.form.subjectAbilityAnalysis),
            actionSuggestion: this.filterContent(this.form.actionSuggestion)
          }
          if (this.form.id != null) {
            updateCompassReport(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("处理成功");
                this.$router.go(-1)
              }
            });
          } else {
            addCompassReport(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("处理成功");
                this.$router.go(-1)
              }
            });
          }
        }
      });
    },

    cancel() {

    },

    getDetails() {
      getCompassReport(this.$route.query.id).then(response => {
        this.form = response.data;
        let typeArr = arrayGroupBy(response.data.expandList, 'linkType')
        for(let n in typeArr) {
          var index = this.linkType.findIndex(item => item == n)
          this[`expandList${index + 1}`] = typeArr[n]
          console.log(this[`expandList${index + 1}`])
        }
      });
    },

    addOne(type) {
      this[`expandList${type}`].push({
        linkKey: '',
        linkType: this.linkType[type-1],
        linkValue: ''
      })
    },

    addMore(type) {
      this.dialogVisible = true
      this.currentType = type
      this.moreInput = ''
    },

    delOne(type, index) {
      if (this[`expandList${type}`].length == 1) {
         this.$message({
          message: '最少一条哦',
          type: 'warning'
        });
        return
      }
      this[`expandList${type}`].splice(index, 1);
    },

    sure() {
      this.dialogVisible = false
      let arr = []
      this.moreInput.split(/[\s\n]/).forEach(item => {
        arr.push({
          linkKey:'',
          linkType: this.linkType[this.currentType - 1],
          linkValue: item
        })
      })
      if (this[`expandList${this.currentType}`].length == 1 && !this[`expandList${this.currentType}`][0].linkValue) {
        this[`expandList${this.currentType}`] = arr
      } else {
        this[`expandList${this.currentType}`] = this[`expandList${this.currentType}`].concat(arr)
      }
    },

    cancelAdd() {
      this.dialogVisible = false
      this.moreInput = ''
    }
  }
}
</script>

<style scoped lang="scss">
  .table_wrapper {
    border: 1px solid #eeeeee;
    .th{
      display: flex;
      width: 100%;
      background: #f7f7f7;
      padding: 0 10px;
    }
    .td {
      display: flex;
      width: 100%;
      padding: 5px;
      border-bottom: 1px solid#eeeeee;
      &:last-child{
        border: none;
      }
    }
  }
</style>
